<template>
  <el-dialog
    v-model="props.modelValue"
    width="1000px"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ t(`dockRepair.btn10`) }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>

    <div class="step1">
      <el-tabs
        v-model="activeName"
        @tab-change="tabChange"
      >
        <el-tab-pane
          :label="item.projectName"
          :name="index"
          v-for="(item, index) in tabData"
        >
        </el-tab-pane>
      </el-tabs>

      <div class="item radio">
        <div class="tit">{{ t('dockRepair.step2page.valve.tit2') }}</div>
        <div class="con clearfix">
          <span class="t fl mr-1">{{ t('dockRepair.step2page.valve.tit5') }}</span>
          <el-checkbox-group
            v-model="s0Active"
            class="fl"
            style="width: 700px"
          >
            <el-checkbox
              v-for="(item, index) in s0"
              :key="index"
              :label="index"
              >{{ item.projectName }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>

      <div class="item mt-2">
        <div class="title mb-1">{{ t('dockRepair.step2page.valve.tit3') }}:</div>
        <div class="con flexsc">
          <div
            :class="['li', 'mr-1', { active: s1ActiveList.includes(index) }]"
            v-for="(item, index) in s1"
            :key="index"
            @click="handleSelect(index, s1ActiveList)"
          >
            {{ item.projectName }}
          </div>
        </div>
      </div>
      <div class="item mt-1">
        <div class="con flexsc">
          <div
            :class="['li', 'mr-1', { active: s2Active === index }]"
            v-for="(item, index) in s2"
            :key="index"
            @click="handleSelect_s2(index)"
          >
            {{ item.projectName }}
          </div>
        </div>
      </div>

      <div class="item mt-2 bottom">
        <div class="title">{{ t('dockRepair.step2page.valve.tit4') }}</div>
        <div class="con grid-3 mt-1">
          <div class="item">
            <div class="label">{{ t('dockRepair.step2page.valve.l3') }}:</div>
            <el-input-number
              v-model="formData.aaa"
              placeholder=""
              :min="0"
              :controls="false"
            >
            </el-input-number>
            <div class="append">A</div>
          </div>
          <div class="item">
            <div class="label">{{ t('dockRepair.step2page.valve.l1') }}:</div>
            <el-input-number
              v-model="formData.bbb"
              placeholder=""
              :min="0"
              :controls="false"
            >
            </el-input-number>
            <div class="append">K</div>
          </div>

          <div class="item">
            <div class="label">{{ t('dockRepair.step2page.valve.l2') }}</div>
            <el-input-number
              v-model="formData.ccc"
              placeholder=""
              :min="0"
              :controls="false"
            >
            </el-input-number>
            <div class="append">pc</div>
          </div>
        </div>
      </div>

      <div class="res">
        <div class="flexec">{{ t('dockRepair.step2page.valve.res') }}:</div>
        <el-input v-model="resValue"></el-input>
        <img
          src="@/assets/img/icon_bianji.png"
          class="ml-1 mr-3"
        />
      </div>
      <div
        class="res"
        style="margin-top: 2px"
      >
        <div
          class="flexec"
          style="visibility: hidden"
        >
          {{ t('dockRepair.step2page.valve.res') }}:
        </div>
        <el-input v-model="resValue2"></el-input>
        <img
          src="@/assets/img/icon_bianji.png"
          class="ml-1 mr-3"
        />
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer flexcc">
        <el-button
          color="#252628"
          plain
          @click="cancel"
        >
          {{ t('cancelText') }}
        </el-button>
        <el-button
          type="primary"
          color="#252628"
          @click="confirm()"
        >
          {{ t('confirmText') }}
        </el-button>
        <el-button
          type="primary"
          color="#252628"
          @click="confirm(true)"
        >
          {{ t('dockRepair.step2page.pipeline.b1') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, nextTick, watch, computed, onBeforeMount } from 'vue'
import { useI18n } from 'vue-i18n'
import { insertAddOnApi, finishOrderInsertAddOnApi, getAddOnValvesAboutApi } from '@/service/dockOrder'
import useDockRepair from '@/stores/dockRepair.js'
import zh from '@/lang/zh.json'
import en from '@/lang/en.json'

const { t, locale } = useI18n()
const store = useDockRepair()

onBeforeMount(() => {
  getOptions()
})

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  checkedRow: {
    type: Object,
    default: () => null
  },
  shipType: {
    type: String,
    default: ''
  },
  isFinishOrder: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'getData'])

const handleClose = () => {
  emit('update:modelValue', false)
}

// 取消
const cancel = () => {
  handleClose()
}

//
const activeName = ref(null)
const tabData = ref([])
const tabChange = (val) => {
  s0Active.value = []
  s1ActiveList.value = []
  s2Active.value = null
}

const s0 = computed(() => {
  return tabData.value[activeName.value]?.detailTitle
})
const s1 = computed(() => {
  return tabData.value[activeName.value]?.detailPlace
})
const s2 = computed(() => {
  return tabData.value[activeName.value]?.detailName
})

const getOptions = () => {
  getAddOnValvesAboutApi({
    shipType: props.shipType
  }).then(({ data }) => {
    tabData.value = data
    activeName.value = 0
  })
}

//
const s0Active = ref([])
const s1ActiveList = ref([])
const s2Active = ref(null)

const handleSelect = (val, list) => {
  const index = list.findIndex((item) => item === val)
  if (index !== -1) {
    list.splice(index, 1)
  } else {
    list.push(val)
  }
}
const handleSelect_s2 = (val) => {
  s2Active.value = val
}

const formData = ref({})

const resValue = ref('') // 第一语言
const resValue2 = ref('') // 第二语言
watch(
  [s1ActiveList, activeName, s2Active, formData],
  ([s1ActiveList, activeName, s2Active, formData]) => {
    const s = ' '

    const fn = (key) => {
      const active = tabData.value[activeName][key]
      const s1ActiveListName = s1ActiveList.map((item) => s1.value[item][key])
      const s2ActiveName = s2.value[s2Active]?.[key] || ''

      const str = `${s1ActiveListName.join(s)}${s}${active}: ${s2ActiveName} ${formData.aaa || 0}A ${formData.bbb || 0}K ${formData.ccc || 0}pc`

      return str
    }

    resValue.value = fn('projectName')
    if (locale.value === 'zh-CN') {
      resValue2.value = fn('projectNameEn')
    }
    if (locale.value === 'en') {
      resValue2.value = fn('projectNameCn')
    }
  },
  {
    deep: true
  }
)

// 重置
const reset = () => {
  formData.value = {}
  getOptions()

  s0Active.value = []
  s1ActiveList.value = []
  s2Active.value = null
}

var fn3 = (value)=>{
  if(value.match('pc')){
    return "pc"
  }else{
    return undefined
  }
}
const api = !props.isFinishOrder ? insertAddOnApi : finishOrderInsertAddOnApi

// 确定
const confirm = async (isContinue = false) => {
  // 标题的
  if (s0Active.value.length) {
    try {
      const fn = (key) => {
        let str = s0Active.value.map((item) => s0.value[item][key]).join(' ')
        return str
      }
      let projectName = ''
      let projectName2 = ''
      if (locale.value === 'zh-CN') {
        projectName = t('dockRepair.step2page.valve.tit5') + ' ' + fn('projectName')
        projectName2 = eval('en.' + 'dockRepair.step2page.valve.tit5') + ' ' + fn('projectNameEn')
      }
      if (locale.value === 'en') {
        projectName = t('dockRepair.step2page.valve.tit5') + ' ' + fn('projectName')
        projectName2 = eval('zh.' + 'dockRepair.step2page.valve.tit5') + ' ' + fn('projectNameCn')
      }

      await api({
        addOnDetailList: [{
          projectName,
          projectName2,
          "unit": fn3(projectName),
          "unit2": fn3(projectName)
        }],
        projectParent: props.checkedRow.id
      }).then((res) => {
        addDetail(res.data, isContinue)
      })
    } catch (error) {
      console.log(error)
    }
  } else {
    addDetail(props.checkedRow.id, isContinue)
  }
}

const addDetail = (projectParent = '', isContinue = false) => {
  api({
    addOnDetailList: [{
      projectName: resValue.value,
      projectName2: resValue2.value,
      requireCount: formData.value.ccc,
      "unit": fn3(resValue.value),
      "unit2": fn3(resValue2.value)
    }],
    projectParent
  }).then(() => {
    ElMessage.success(t('saveSuccess'))
    emit('getData')

    if (isContinue) {
      reset()
    } else {
      handleClose()
    }
  })
}
</script>

<style scoped lang="scss">
.title {
  font-weight: bold;
  color: #252628;
  &::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 12px;
    background: var(--mainColor);
    margin-right: 8px;
  }
}

.radio {
  .con {
    > .t {
      line-height: 30px;
    }
  }
}

.step1 {
  > .item {
    .li {
      padding: 5px 10px;
      cursor: pointer;
      margin-top: 3px;
      background: #fae9e5;

      &.active {
        background: var(--mainColor);
        color: #fff;
        border-color: var(--mainColor);
      }
    }

    &.bottom {
      .con {
        width: 760px;
        margin: 10px auto 0;
        gap: 10px;
        .item {
          display: grid;
          grid-template-columns: 80px 100px auto;
          align-items: center;
          gap: 10px;

          :deep(.el-input-number) {
            width: 100%;
          }

          .label {
            text-align: right;
          }
        }
      }
    }
  }

  .res {
    width: 760px;
    margin: 10px auto 0;
    display: grid;
    grid-template-columns: 80px 614px auto;
    align-items: center;
    gap: 10px;
  }
}
</style>
